Vue.component('show-detail', {
    template: `<el-dialog id="user" title="明细查询" :visible.sync="visibleDialog" width="80vw">
    <div style="display:flex;">
        <div style="width:170px;height:170px;border:1px solid #EBEEF5;flex-shrink:0;display: flex;justify-content: center; align-items: center;">
            <el-image style="width:150px;height:150px;" :preview-src-list="[BASE_IMG + data.Picture_URL]" :src="BASE_IMG + data.Picture_URL">
                <div slot="error" class="el-image__error">暂无商品封面</div>
            </el-image>
        </div>
        <el-descriptions style="width:100%" :column="3" border size="small">
            <el-descriptions-item label="商品名称">
                <el-tooltip class="item" effect="dark" :content="data.Article_Name" placement="top-start">
                    <el-input :value="data.Article_Name" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="商品内码">
                <el-tooltip class="item" effect="dark" :content="data.Article_SerialNumber" placement="top-start">
                    <el-input :value="data.Article_SerialNumber" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="商品编码">
                <el-tooltip class="item" effect="dark" :content="data.Article_Code" placement="top-start">
                    <el-input :value="data.Article_Code" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="商品品牌">
                <el-tooltip class="item" effect="dark" :content="data.Brand_Name" placement="top-start">
                    <el-input :value="data.Brand_Name" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <!--<el-descriptions-item label="吊牌价">
                <el-tooltip class="item" effect="dark" :content="data.Unit_Price" placement="top-start">
                    <el-input :value="data.Unit_Price" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>-->
            <el-descriptions-item label="经营商家">
                <el-tooltip class="item" effect="dark" :content="data.Supplier_Name" placement="top-start">
                    <el-input :value="data.Supplier_Name" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="是否参与团购">
                <el-tooltip class="item" effect="dark" :content="data.Group" placement="top-start">
                    <el-input :value="data.Group" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="京东价">
                <el-tooltip class="item" effect="dark" :content="data.JDCOM_Unit_Price" placement="top-start">
                    <el-input :value="data.JDCOM_Unit_Price" :disabled="true"></el-input>
                </el-tooltip>    
            </el-descriptions-item>
            <el-descriptions-item label="京东链接">
                <el-tooltip class="item" effect="dark" :content="data.JDCOM_URL" placement="top-start">
                    <el-input :value="data.JDCOM_URL" :disabled="true"></el-input>
                </el-tooltip> 
            </el-descriptions-item>
        </el-descriptions>
    </div>
    <div class="table_titel">
        <div class="titel">规格详情</div>
    </div>
    <el-table :data="tableData" stripe border min-height="50vh" style="width: 100%" @expand-change="expandChange">
        <el-table-column align="center" type="expand" width="70" label="供应商">
            <template slot-scope="props">
                <div style="padding:0 20px;">
                    <el-table :data="props.row.Children" stripe border style="width: 100%">
                        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                        <el-table-column prop="Supplier_Name" label="供应商"></el-table-column>
                        <el-table-column prop="Sales_Unit_Price" label="销售价格"></el-table-column>
                        <el-table-column prop="Purchase_Unit_Price" label="采购价格"></el-table-column>
                        <el-table-column prop="Stock_Remain" label="每日库存"></el-table-column>
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="Article_Specifications_SerialNumber" width="200" show-overflow-tooltip label="规格流水号"></el-table-column>
        <el-table-column align="center" prop="BarCode" show-overflow-tooltip label="条码"></el-table-column>
        <el-table-column align="center" prop="Specifications_Name" show-overflow-tooltip label="规格名称"></el-table-column>
        <el-table-column prop="Picture_URL" width="140" align="center" label="规格图片">
            <template v-slot="{row}">
                <el-image fit="contain" :preview-src-list="[BASE_IMG + row.Picture_URL]" :src="BASE_IMG + row.Picture_URL" style="width:100px;height: 100px;"></el-image>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="Unit_Price" show-overflow-tooltip label="吊牌价"></el-table-column>
        <el-table-column align="center" prop="JDCOM_URL" show-overflow-tooltip label="京东连接"></el-table-column>
        <el-table-column align="center" prop="JDCOM_Unit_Price" show-overflow-tooltip label="京东价"></el-table-column>
    </el-table>
    <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 30, 50]"
        :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <div class="table_titel">
        <div class="titel">主图/详情图</div>
    </div>
    <div style="display:flex;">
        <el-carousel v-if="Swiper.length>0" height="400px" style="width:400px;flex-shrink: 0;" indicator-position="none">
            <el-carousel-item v-for="(item,index) in Swiper" :key="index" >
                <el-image style="width:400px;height:400px;" :preview-src-list="[BASE_IMG + item.Picture_URL]" :src="BASE_IMG + item.Picture_URL">
                    <div slot="error" class="el-image__error">加载失败</div>
                </el-image>
            </el-carousel-item>
        </el-carousel>
        <div v-if="Detail.length>0" style="width:100%; height:400px;display:flex;justify-content: center; overflow-y: auto;">
            <div style="width:400px">
                <el-image v-for="(item,index) in Detail" :key="index" style="width:400px;" fit="contain" :preview-src-list="[BASE_IMG + item.Picture_URL]" :src="BASE_IMG + item.Picture_URL">
                    <div slot="error" class="el-image__error">加载失败</div>
                </el-image>
            </div>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">返回</el-button>
    </span></el-dialog>`,
    props: ['data', 'visible'],
    data() {
        return {
            visibleDialog: false,
            refreshDialog: false,
            Picture_URL:[],
            tableData: [],
            form: {
                SQLSerialNumber: "P_business_article_specifications",
                PaginationNumber: 1,
                RowAmount: 10,
                ExtensionCondition: '',
                Condition: ''
            },
            total: 0,
        }
    },
    computed: {
        Swiper(){//冒泡排序处理轮播图		
            let Picture_URL = this.Picture_URL.filter(i=>i.Picture_Type == '0')
            for (var i = 0; i < Picture_URL.length - 1; i++) {
              for (var j = 0; j < Picture_URL.length - i - 1; j++) {
                if (parseInt(Picture_URL[j].Picture_Order) > parseInt(Picture_URL[j + 1].Picture_Order)) {
                     var count = Picture_URL[j];
                    Picture_URL[j] = Picture_URL[j + 1];
                    Picture_URL[j + 1] = count;
                 };
              };
            };
            return Picture_URL		
        },
        Detail(){//冒泡排序处理详情图
            let Picture_URL = this.Picture_URL.filter(i=>i.Picture_Type == '1')
            for (var i = 0; i < Picture_URL.length - 1; i++) {
              for (var j = 0; j < Picture_URL.length - i - 1; j++) {
                if (parseInt(Picture_URL[j].Picture_Order) > parseInt(Picture_URL[j + 1].Picture_Order)) {
                     var count = Picture_URL[j];
                    Picture_URL[j] = Picture_URL[j + 1];
                    Picture_URL[j + 1] = count;
                 };
              };
            };
            return Picture_URL	
        },
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
            if (val) {
                this.form.Condition = window.btoa(unescape(encodeURIComponent(this.data.Article_SerialNumber)));
                this.getList(this.form);
                this.getData()
            }
        },
    },
    methods: {
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        expandChange(row) {
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
                type: 'POST',
                data:{
                    SQLSerialNumber: "A_business_supplier_article1",
                    Condition: window.btoa(unescape(encodeURIComponent(row.Article_Specifications_SerialNumber ))),
                    ExtensionCondition: '',
                },
                success: function (Result) {
                    row.Children = Result
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        getList(data) {
            const that = this
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    Result.Rows.forEach(item=>{
                        item['Children'] = []
                    })
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                },
                complete: function (XMLHttpRequest) {
                    that.refreshDialog = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        getData(){
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'POST',
                data:{
                    Data: 'business_article_pic',
                    Condition:"Article_SerialNumber = '"+this.data.Article_SerialNumber+"'",
                },
                success: function (Result) {
                    that.Picture_URL = Result;
                    console.log(that.Swiper);
                    console.log(that.Detail);
                },
                complete: function (XMLHttpRequest) {
                    that.refreshDialog = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        }
    }
})
new Vue({
    el: '#app',
    data() {
        return {
            form: {
                SQLSerialNumber: "P_business_article_info1",
                PaginationNumber: 1,//页数
                RowAmount: 10,//每页数据条数
                Condition: '',
                ExtensionCondition: '',
                Article_Name: '',
                Brand_SerialNumber: '',
            },
            total: 0,
            tableData: [],	//表格数据
            ExportData: [],
            multipleSelection: [],
            brand: [], //商品品牌
            loading: false,
            dialogVisible: false,
            Article_SerialNumber: {},
        }
    },
    mounted() {
        this.getData();
        this.getList(this.form);//前端分页
    },
    methods: {
        getData() {
            const that = this;
            const Condition = "Row_Status='0'";
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'POST',
                data: {
                    Data: 'business_brand',
                    Condition,
                },
                success: function (res) {
                    that.brand = res;
                },
                error: function () {
                    that.$message.error("操作失败，请稍后再试")
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        onSerach() {			//查询方法
            this.form.PaginationNumber = 1;
            this.getList(this.form)
        },
        examine(command, row) {//审核
            const that = this;
            if (command == 'true') {
                this.$confirm('确认审核通过，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    row.Row_Status = '0'
                    let business_article_log = [{
                        Article_SerialNumber: row.Article_SerialNumber,
                        Row_Status: '0'
                    }]
                    $.ajax({
                        headers: requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Modify: { business_article_info: [row] }, Add: { business_article_log } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.$message({
                                    type: 'success',
                                    message: '审核通过!'
                                });
                                that.getList(that.form);
                            } else {
                                that.$message.error("操作失败")
                            }
                        },
                        error: function () {
                            that.$message.error("系统繁忙")
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                }).catch(() => { });
            } else if (command == 'false') {
                this.$prompt('确认审核未通过，并填写拒绝原因?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(({ value }) => {
                    row.Row_Status = '8'
                    row.Article_Name = row.Article_Name;
                    let business_article_log = [{
                        Article_SerialNumber: row.Article_SerialNumber,
                        Casue: value?value:'',
                        Row_Status: '1'
                    }]
                    $.ajax({
                        headers: requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Modify: { business_article_info: [row] }, Add: { business_article_log } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.$message({
                                    type: 'success',
                                    message: '已拒绝!'
                                });
                                that.getList(that.form);
                            } else {
                                that.$message.error("操作失败")
                            }
                        },
                        error: function () {
                            that.$message.error("系统繁忙")
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                }).catch(() => { });
            }
        },
        batchConfig(command) {
            const that = this;
            if (this.multipleSelection.length > 0) {
                if (command == 'true') {
                    this.$confirm('确认审核通过，是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(() => {
                        let business_article_log = [];
                        this.multipleSelection.forEach(row=>{
                            row.Row_Status = '0'
                            business_article_log.push({
                                Article_SerialNumber: row.Article_SerialNumber,
                                Row_Status: '0'
                            })
                        })
                        $.ajax({
                            headers: requestHeaders(),
                            url: `${BASE_URL2}/generalBusiness/generalSave`,
                            type: 'POST',
                            data: {
                                Data: JSON.stringify({ Modify: { business_article_info: this.multipleSelection }, Add: { business_article_log } })
                            },
                            success: function (res) {
                                if (res.Status === 'success') {
                                    that.$message({
                                        type: 'success',
                                        message: '审核通过!'
                                    });
                                    that.getList(that.form);
                                } else {
                                    that.$message.error("操作失败")
                                }
                            },
                            error: function () {
                                that.$message.error("系统繁忙")
                            },
                            complete: function (XMLHttpRequest) {
                                that.loading = false
                                requestPretreatment(XMLHttpRequest);
                            },
                            dataType: "json"
                        })
                    }).catch(() => { });
                }else if (command == 'false'){
                    this.$prompt('确认审核未通过，并填写拒绝原因?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(({ value }) => {
                        let business_article_log = [];
                        this.multipleSelection.forEach(row=>{
                            row.Row_Status = '8'
                            row.Article_Name = row.Article_Name
                            business_article_log.push({
                                Article_SerialNumber: row.Article_SerialNumber,
                                Casue: value?value:'',
                                Row_Status: '1'
                            })
                        })
                        $.ajax({
                            headers: requestHeaders(),
                            url: `${BASE_URL2}/generalBusiness/generalSave`,
                            type: 'POST',
                            data: {
                                Data: JSON.stringify({ Modify: { business_article_info: this.multipleSelection }, Add: { business_article_log } })
                            },
                            success: function (res) {
                                if (res.Status === 'success') {
                                    that.$message({
                                        type: 'success',
                                        message: '已拒绝!'
                                    });
                                    that.getList(that.form);
                                } else {
                                    that.$message.error("操作失败")
                                }
                            },
                            error: function () {
                                that.$message.error("系统繁忙")
                            },
                            complete: function (XMLHttpRequest) {
                                that.loading = false
                                requestPretreatment(XMLHttpRequest);
                            },
                            dataType: "json"
                        })
                    }).catch(() => { });
                }
            }else{
                that.$message({
                    message: "请选择待审核的商品",
                    type: 'warning'
                })
            }
        },
        Show(Article_SerialNumber) {
            this.Article_SerialNumber = Article_SerialNumber
            this.dialogVisible = true
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        downloadTemplate(command) {
            if (command == "Article") {
                window.location.href = './download/导入商品模板表.xlsx';
            } else if (command == "BarCode") {
                window.location.href = './download/导入条形码模板.xlsx';
            }
        },
        importTemplate(command) {
            if (command == "Article") {
                window.location.href = './import_article.html';
            } else if (command == "BarCode") {
                window.location.href = './import_barcode.html';
            }
        },
        Download0(Article_SerialNumber) {//下载主图
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                type: 'POST',
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                data: {
                    Data: 'business_article_pic',
                    Condition: "Article_SerialNumber='" + Article_SerialNumber + "' and Row_Status='0' and Picture_Type='0'",
                },
                success: function (Result) {
                    let Files = "";
                    Result.forEach(item => {
                        if (Files) {
                            Files = Files + "," + item.Picture_URL;
                        } else {
                            Files = item.Picture_URL;
                        }
                    })
                    const url = `${BASE_URL2}/login/downloadZipFile?Files=${Files}`;
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    document.body.appendChild(a);
                    a.click(); // 触发点击
                    a.remove();
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        Download1(Article_SerialNumber) {//下载详情图
            $.ajax({
                headers: requestHeaders(),
                type: 'POST',
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                data: {
                    Data: 'business_article_pic',
                    Condition: "Article_SerialNumber='" + Article_SerialNumber + "' and Row_Status='0' and Picture_Type='1'",
                },
                success: function (Result) {
                    let Files = "";
                    Result.forEach(item => {
                        if (Files) {
                            Files = Files + "," + item.Picture_URL;
                        } else {
                            Files = item.Picture_URL;
                        }
                    })
                    const url = `${BASE_URL2}/login/downloadZipFile?Files=${Files}`;
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    document.body.appendChild(a);
                    a.click(); // 触发点击
                    a.remove();
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        downloadAddTemplate() {//新增商品模板
            window.location.href = './download/导入商品模板表.xlsx';
        },
        downloadEditTemplate() {//更新商品模板
            window.location.href = './download/更新商品信息导入模板表.xlsx';
        },
        getList(form) {//换页方法
            const that = this
            let data = deepClone(form);
            data.Condition = window.btoa(unescape(encodeURIComponent("%" + data.Article_Name + "%")))
            let SQL = "";
            if (data.Brand_SerialNumber) {
                SQL = SQL + " and business_article_info.Brand_SerialNumber = '" + data.Brand_SerialNumber + "' "
            }
            data.ExtensionCondition = window.btoa(unescape(encodeURIComponent(SQL)));
            $.ajax({
                headers: requestHeaders(),
                type: 'POST',
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                data,
                success: function (Result) {
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        Edit(Article_SerialNumber) {
            sessionStorage.setItem("Article_SerialNumber", Article_SerialNumber)
            window.location.href = './edit.html?Article_SerialNumber=' + Article_SerialNumber
        },
    },
})